<template>
    <el-tabs type="border-card" :style="{minHeight:`${height}px`}">
        <el-tab-pane :label="groupId?'编辑组':'新增组'">
            <el-form
                label-position="top"
                label-width="80px"
                :model="formLabelAlign"
                ref="ruleForm"
                :rules="rules"
            >
                <el-form-item label="组名称" prop="groupName">
                    <el-input
                        style="width: 50%;"
                        class="title"
                        v-model="formLabelAlign.groupName"
                        maxlength="30"
                    > </el-input>
                </el-form-item>

<!--                <el-transfer-->
<!--                    filterable-->
<!--                    filter-placeholder="请输入搜索权限"-->
<!--                    :titles="['权限列表', '组权限']"-->
<!--                    v-model="groupPermissions"-->
<!--                    :data="permissionList"-->
<!--                ></el-transfer>-->
                <el-form-item label="权限" prop="groupName">
                    <el-checkbox-group v-model="groupPermissions">
                        <el-checkbox
                                v-for="item in permissionList"
                                :key="item.key"
                                :label="item.key"
                        >{{ item.label }}</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>

                <el-form-item style="margin-top: 40px;">
                    <el-button type="primary" @click="submit">立即提交</el-button>
                </el-form-item>

            </el-form>
        </el-tab-pane>
    </el-tabs>
</template>

<script>
    import { permissionList,groupAdd,groupDetail,groupEdit } from '@/api/permission'
    import {getHeight} from "@/utils/regular";
    import {groupRules} from "@forms/group";

    export default {
        name: "groupEdit",
        data() {
            return {
                height:0,
                groupId: '',
                permissionList:[],
                groupPermissions:[],
                rules:groupRules,
                formLabelAlign:{
                    groupName:'',
                },
            }
        },
        created(){
            this.groupId = this.$route.params.groupId
            if (this.groupId)this.getDetail()
            this.height = getHeight() - 92
            this.getpermissionList()
        },
        methods: {
            getDetail(){
                groupDetail(this.groupId)
                    .then(res=>{
                        if(Number(res.code)===0){
                           let data = res.data
                            this.groupPermissions = data.permissions_list
                            this.formLabelAlign.groupName = data.group_name
                        }else{
                            this.$Alert({ message:res.msg, type:'error' })
                        }
                    })
            },
            getpermissionList() {
                permissionList()
                    .then(res=>{
                        if (Number(res.code) === 0) {
                            let permissionList = []
                            res.data.forEach(item=>{
                                permissionList.push({
                                    label: item.name.split('Can ')[1],
                                    key: item.id,
                                })
                            })

                            this.permissionList = permissionList
                        } else {
                            this.$Alert({message: res.msg, type: 'error'})
                        }
                    })
            },
            submit(){
                this.$refs.ruleForm.validate(valid => {
                    if (!valid) return false
                    let formLabelAlign = this.formLabelAlign

                    let params = {
                        group_name:formLabelAlign.groupName,
                        group_permissions:this.groupPermissions,
                    }

                    if(this.groupId){
                        groupEdit(this.groupId,params)
                            .then(res=>this.resultHandle(res))
                    }else{
                        groupAdd(params)
                            .then(res=>this.resultHandle(res))
                    }
                })
            },
            resultHandle(res){
                if(Number(res.code)===0){
                    this.$Alert({
                        message:res.msg,
                        type:'success',
                        callback:()=> {
                            this.$router.push(`/admin/groupList`)
                        }
                    })
                }else{
                    this.$Alert({ message:res.msg, type:'error' })
                }
            }
        },
    }
</script>

<style scoped lang="less">

</style>
